<template>
<div>
<p @click="showAlert">朋友</p>
<p @click="showAlert">朋友</p>
<p @click="showAlert">朋友</p>
</div>
</template>

<script>
// 组件的注册使用步骤：
// 1. 创建组件 (创建vue文件)
//   2. 导入组件 (script -> import导入)
//   3. 注册组件 (script -> components注册)
//   4. 使用组件 (template -> 使用)
export default{
//行为 
methods: {
    showAlert() {
      alert('功能暂未开通，敬请期待');
    }
  }
}
</script>

<style scoped>
p {
    color: #333;
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 10px 0;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: justify;
    width: 100px;
    text-align: center;
}
</style>